<template>
  <div class="my-tab-bar">
  	<div @click="changeBtn(index)" 
    class="tab-item" v-for="(item,index) in list" :key="index"
    :class="{current: index === curIndex}">
      <!-- 图标：动态绑定类名的语法：:class=[类名1, 类名2]-->
      <span class="iconfont" :class="[item.iconText]"></span>
      <!-- 文字 -->
      <span>{{ item.text }}</span>
    </div>
  </div>
</template>

<script>
/***
 * 需求：点击底部实现高亮效果
 * 点击哪个按钮，就给哪个按钮添加current类名即可
 * 
 * 1、我们要知道用户到底点击了哪个按钮，怎么办？
 *  答：给按钮绑定点击事件的时候，把他们的下标值保存起来，那么我就可通过下标值判断用户点击了谁 
 * 2、动态绑定current类名, 然后通过v-for中的index和保存起来的下标值进行比较，如果相等说明用户点击了改按钮，
 *  那么给改按钮类名即可
 *  
 *
 */ 
export default {
  props: {
      list: {
          type: Array,
          validator(arr){
            //   这个函数props提供的，用于自定义校验规则
            // 当这个函数返回true表示校验通过，否则表示校验不通过
            // arr: 这个参数就是传入的list数组
            let bool = true
            if(arr.length>=2&&arr.length<=5){
                bool=true
            }else{
                bool = false
            }
            return bool
          }
      }
  },
  data(){
    return {
      curIndex: 0
    }
  },
  methods: {
    changeBtn(index){
      this.curIndex = index
      // 获取当前按钮对应需要显示的组件名
      // console.log(this.list[index].componentName);
      // 子传父，把需要显示的组件名传递给父组件
      this.$emit("changeEvent", this.list[index].componentName)
    }
  }
}
</script>

<style lang="less" scoped>
.my-tab-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
    
.current {
  color: #1d7bff;
}
</style>